import React from 'react';
import './Certer.css';

// 定义VIP卡类型
type VipCard = {
  id: number;
  title: string;
  status: string;
};

const PersonalCenter: React.FC = () => {
  // VIP卡片数据
  const vipCards: VipCard[] = [
    { id: 1, title: '个人VIP', status: '未开通' },
    { id: 2, title: '在线设计VIP', status: '未开通' },
    { id: 3, title: '智能抠图VIP', status: '未开通' },
  ];

  // 功能入口数据
  const features = [
    { id: 1, name: '在线抠图', icon: '✂️' },
    { id: 2, name: '在线设计', icon: '🎨' },
    { id: 3, name: '下载记录', icon: '📥' },
    { id: 4, name: '收藏记录', icon: '❤️' },
  ];

  return (
    <div className="personal-center-container">
      {/* 顶部警告条 */}
      <div className="alert-bar">
        <span className="alert-icon">!</span> 当前账号未获得授权，商用请购买企业VIP
      </div>
      
      {/* 用户信息部分 */}
      <div className="user-section">
        <div className="user-info">
          <div className="avatar">
            <div className="avatar-placeholder">👤</div>
          </div>
          <div className="user-details">
            <div className="phone">183***44217</div>
            <div className="userId">包图号:57391342</div>
          </div>
        </div>
        <button className="profile-button">
          个人中心
        </button>
      </div>
      
      {/* VIP状态区域 */}
      <div className="vip-section">
        <div className="vip-header">
          <div className="vip-title">
            <div className="vip-icon">⚡</div>
            <span>企业VIP</span>
            <span className="vip-status">·未开通</span>
          </div>
          <button className="consult-button">
            去咨询
          </button>
        </div>
        
        <div className="vip-grid">
          {vipCards.map(card => (
            <div key={card.id} className="vip-card">
              <div className="card-icon">{card.title.includes('个人') ? '👤' : card.title.includes('设计') ? '🎨' : '🤖'}</div>
              <div className="card-details">
                <div className="card-title">{card.title}</div>
                <div className="card-status">{card.status}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* 促销横幅区域 */}
      <div className="promotions">
        <div className="banner blue-banner">
          <img src="../../assets/themePage/p1.png" alt="" />
        </div>
        
        <div className="banner orange-banner">
         <img src="../../assets/themePage/vip_v2.png" alt="" />
        </div>
      </div>
      
      {/* 功能入口区域 */}
      <div className="features-grid">
        {features.map(feature => (
          <div key={feature.id} className="feature-item">
            <div className="feature-icon">{feature.icon}</div>
            <div className="feature-name">{feature.name}</div>
          </div>
        ))}
      </div>
      
      {/* 退出登录按钮 */}
      <button className="logout-button">
        <div className="logout-icon">➡️</div>
        <span>退出登录</span>
      </button>
    </div>
  );
};

export default PersonalCenter;